<template>
<view>
	<!-- 顶部布局 -->
	<view class="header">
		<navigator hover-class="none" url="../citys/citys" class="location" @click="tocity">{{location}}</navigator>
		<view class="inp">
			<navigator nover-class="none" url="" class="nav">请输入你想输          入的内容</navigator>
		</view>
		
	</view>
	<!-- 分类-->
	<view class="navBar">
		<view class='item' v-for="(item,index) in navBarArr" :key="item.id">
			<navigator  hover-class="none" >
			<image :src="item.imgUrl" ></image>
			<view>{{item.name}}</view>
			</navigator>
		</view>
	</view>
	<!-- 列表 -->
<navigator url="" v-for="(item,index) in listArr" :key="item.id" @click="toproductDetail(item.id)">
	<view class='list'>
		<view class="img">
			<image :src="item.pic" mode=""></image>
		</view>
			<view class="info">
				<view class="list-title">{{item.name}}</view>
				<view class="list-desc">{{item.description}}</view>
				<view class="list-bottom">
					<text>￥{{item.price}}元</text>{{item.buynum}}人付款
				</view>
			</view>	
	</view>
</navigator>
 <procuctDetail/>
<!-- 加入购物车布局 -->
<view class="bottom">
	<view class="img" @click="toshop">
		<image src="../../static/images/tab9.png"></image>
	</view>
	<view class="addShop">加入购物车</view>
	<view class="buy-now">直接购买</view>
</view>
	<!-- 使用模板 -->
	<!-- <view class="" v-for="(item,index) in listArr" :key="item.id">
		<template is="productList" data="">{{item.title}}</template>
	</view>
	<view>今天天其很好</view> -->
</view>
</template>

<script>
	//引入request
	import request from '../../utils/http.js'
	export default {
		data(){
			return{
				isflag:false,
				info:'',
				location:'上海',
				num:1,//当前也买你数据
				msg:'',//页面加载更多数据提示信息
				listArr:[],//列表数据
				navBarArr:[
					{
						id:0,
						imgUrl:'../../static/images/item1.jpg',
						name:'美容养颜'
					},
					{
						id:1,
						imgUrl:'../../static/images/item2.jpg',
						name:'保健调养'
					},
					{
						id:2,
						imgUrl:'../../static/images/item3.jpg',
						name:'补养'
					},
					{
						id:3,
						imgUrl:'../../static/images/item4.jpg',
						name:'减肥'
					},
					{
						id:4,
						imgUrl:'../../static/images/item5.jpg',
						name:'母婴'
					},
					{
						id:5,
						imgUrl:'../../static/images/item6.jpg',
						name:'气节'
					},
					{
						id:6,
						imgUrl:'../../static/images/item7.jpg',
						name:'常见食疗'
					},
					{
						id:7,
						imgUrl:'../../static/images/item8.jpg',
						name:'维生素'
					},
				]
			}
		},
	
	onShow:function(options){
		//获取本地缓存的城市名、
		const cityname=wx.getStorageSync('cityName');
		  console.log( '城市名',cityname)
			if(cityname){
				this.location = cityname
			}
		wx.request({
		  url: 'http://iwenwiki.com:3002/api/foods/list',
		  data:{
		    city:this.location,
		    page: 1
		  },
		  success:res=>{
		    // console.log(res.data);
		    if(res.data.status==200){
		      this.listArr= res.data.data.result
		      
		    }else{
		      console.log('请求无数据')
		    }
		  }
		})
		
	},
	methods:{
		tocity(){
			wx.navigateTo({
				url:'/pages/citys/citys'			
			})
		},
		toproductDetail(e){
			// console.log(e)
		wx.navigateTo({
			url:'/pages/productDetail/productDetail?id='+e
		})
		},
		//点击购物车图片跳转到购物车
		toshop(){
			wx.switchTab({
				url:'../myCart/myCart'
			})
		}
	}	
}
</script>

<style>
page{
  background: #f5f5f5;
}
.header{
  background: #fff;
  padding:10rpx;
  display: flex;
   height: 60rpx;
  line-height: 60rpx;
    font-size: 30rpx;
}
.location{
  width: 100rpx;
 text-align: center;
}
.inp{
  flex: 1;
  background: #f5f5f5;
  border-radius: 16rpx;
  padding-left: 10rpx;
}
.nav{
  color: #666;
  width: 100%;
}
/* 分类布局 */
.navBar{
  background: #fff;
  display: flex;
  padding-top: 20rpx;
  flex-wrap: wrap;
}
.item{
  width: 25%;
  text-align: center;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  color: #666;
}
.item image{
  width: 74rpx;
  height: 74rpx;
}
/* 列表 */
navigator .list{
display: flex;
 padding: 16rpx;
  background: #fff;
  margin-top: 20rpx;
}
.img image{
  width: 184rpx;
  height: 184rpx;
  padding-right: 20rpx;
}
.info{
/*  flex: 1; */
  position: relative;
}
.list-desc{
  color: #666;
  font-size: 20rpx;
  line-height: 20rpx;
    overflow: hidden;
    margin-top: 10rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
}
.list-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 26rpx;
  color: #666;
}
.list-bottom text{
  color: red;
  padding-right: 30rpx;
}
/* 购物车布局 */
.bottom{
position: fixed;
bottom: 0;
left:0;
right: 0;
background: #fff;
height: 80rpx;
line-height: 80rpx;
align-items: center;
display: flex;
padding: 20rpx;
font-size: 30rpx;
}
 .img{
  flex: 1;
  text-align: right;
}
.bottom .img image{
  width: 60rpx;
  height: 60rpx;
  padding-right: 20rpx;
  margin-top: 10rpx;
}

.addShop{
  background: red;
  color: #fff;
  padding: 0 20rpx;
  border-radius: 10rpx 0 0 10rpx;
}

.buy-now{
  background: pink;
  color: #fff;
  padding: 0 20rpx;
  border-radius: 0rpx 10rpx 10rpx 0;
}
</style>